<script setup>
import layer from "./layer.vue";
import { useIconStore } from "@/stores/icon-list.js";
import { useMapStore } from "@/stores/map";
import IconExitFull from "../icons/IconExitFull.vue";
import IconTuCeng from "../icons/IconTuCeng.vue";
const iconStore = useIconStore(); // 此处不能解构，解构会让变量失去响应式
const mapStore = useMapStore();
const router = useRouter();
const goHome = () => {
    router.push({ path: "/" });
};
onMounted(() => {
    iconStore.initScreenfull();
});
</script>
<template>
    <div class="icon-list">
        <!-- <el-icon
        @click="iconStore.handleShowOrHid()">
            <Expand v-if="iconStore.showRightOrLeft" />
            <Fold v-if="!iconStore.showRightOrLeft" />
        </el-icon> -->
        <el-icon @click="goHome"><HomeFilled /></el-icon>
        <el-icon @click="iconStore.zoomIn(mapStore.map)"><ZoomIn /></el-icon>
        <el-icon @click="iconStore.zoomOut(mapStore.map)"><ZoomOut /></el-icon>

        <el-icon>
            <FullScreen
                v-if="!iconStore.isFullscreen"
                @click="iconStore.clickFullScreenIcon"
            />
            <IconExitFull
                v-if="iconStore.isFullscreen"
                @click="iconStore.clickFullScreenIcon"
            />
        </el-icon>
        <el-icon @click="iconStore.showOrHiddenLayerTree()">
            <IconTuCeng />
        </el-icon>
    </div>
    <layer v-show="iconStore.showLayerTree"></layer>
</template>
<style lang="scss" scoped>
.icon-list {
    color: #bbb;
    cursor: pointer;
    position: absolute;
    top: 12%;
    right: 640px;
    background: inherit;
    z-index: 99;
    font-size: 20px;
    background: #263352;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 35px;
    align-content: stretch;
    transform: scale(1.2);
    .el-icon {
        margin: 8px 0;
    }
}
</style>
